<section [formGroup]="createAlarmConfigForm" fxLayout="column">
  <label translate class="tb-title no-padding">tb.rulenode.alarm-details-builder</label>
  <tb-js-func #jsFuncComponent
              formControlName="alarmDetailsBuildJs"
              functionName="Details"
              [functionArgs]="['msg', 'metadata', 'msgType']"
              noValidate="true">
  </tb-js-func>
  <div fxLayout="row" style="padding-bottom: 16px;">
    <button mat-button mat-raised-button color="primary" (click)="testScript()">
      {{ 'tb.rulenode.test-details-function' | translate }}
    </button>
  </div>
  <div fxLayout="column" fxLayout.gt-sm="row">
    <mat-checkbox formControlName="useMessageAlarmData" style="padding-bottom: 16px; flex: 1;">
      {{ 'tb.rulenode.use-message-alarm-data' | translate }}
    </mat-checkbox>
    <mat-checkbox  *ngIf="createAlarmConfigForm.get('useMessageAlarmData').value === false" formControlName="dynamicSeverity" style="padding-bottom: 16px; flex: 1;">
      {{ 'tb.rulenode.use-dynamically-change-the-severity-of-alar' | translate }}
    </mat-checkbox>
  </div>
  <section fxLayout="column" *ngIf="createAlarmConfigForm.get('useMessageAlarmData').value === false">
    <section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">
      <mat-form-field fxFlex style="padding-bottom: 32px;">
        <mat-label translate>tb.rulenode.alarm-type</mat-label>
        <input required matInput formControlName="alarmType">
        <mat-error *ngIf="createAlarmConfigForm.get('alarmType').hasError('required')">
          {{ 'tb.rulenode.alarm-type-required' | translate }}
        </mat-error>
        <mat-hint [innerHTML]="'tb.rulenode.general-pattern-hint' | translate | safeHtml"></mat-hint>
      </mat-form-field>
        <mat-form-field fxFlex *ngIf = "!createAlarmConfigForm.get('dynamicSeverity').value">
          <mat-label translate>tb.rulenode.alarm-severity</mat-label>
          <mat-select formControlName="severity" required>
            <mat-option *ngFor="let severity of alarmSeverities" [value]="severity">
              {{ alarmSeverityTranslationMap.get(severity) | translate }}
            </mat-option>
          </mat-select>
          <mat-error *ngIf="createAlarmConfigForm.get('severity').hasError('required')">
            {{ 'tb.rulenode.alarm-severity-required' | translate }}
          </mat-error>
        </mat-form-field>
        <mat-form-field fxFlex *ngIf = "createAlarmConfigForm.get('dynamicSeverity').value" style="padding-bottom: 32px;">
          <mat-label>    {{ 'tb.rulenode.alarm-severity' | translate }}</mat-label>
          <input matInput formControlName="severity" required>
          <mat-error *ngIf="createAlarmConfigForm.get('severity').hasError('required')">
            {{ 'tb.rulenode.alarm-severity-required' | translate }}
          </mat-error>
          <mat-hint [innerHTML]="'tb.rulenode.alarm-severity-pattern-hint' | translate | safeHtml"></mat-hint>
        </mat-form-field>
    </section>
    <mat-checkbox formControlName="propagate" style="padding-bottom: 16px;">
      {{ 'tb.rulenode.propagate' | translate }}
    </mat-checkbox>
    <section *ngIf="createAlarmConfigForm.get('propagate').value === true">
      <mat-form-field floatLabel="always" class="mat-block" style="padding-bottom: 16px;">
        <mat-label translate>tb.rulenode.relation-types-list</mat-label>
        <mat-chip-list #relationTypesChipList>
          <mat-chip
            *ngFor="let key of createAlarmConfigForm.get('relationTypes').value;"
            (removed)="removeKey(key, 'relationTypes')">
            {{key}}
            <mat-icon matChipRemove>close</mat-icon>
          </mat-chip>
          <input matInput type="text" placeholder="{{'tb.rulenode.relation-types-list' | translate}}"
                 style="max-width: 200px;"
                 [matChipInputFor]="relationTypesChipList"
                 [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                 (matChipInputTokenEnd)="addKey($event, 'relationTypes')"
                 [matChipInputAddOnBlur]="true">
        </mat-chip-list>
        <mat-hint translate>tb.rulenode.relation-types-list-hint</mat-hint>
      </mat-form-field>
    </section>
  </section>
</section>
